<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/react/react.development.js"></script>
    <script src="./lib/react/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <div id="app"></div>

    <script type="text/babel">
      const msg = "前端小溪";
      let arr = [1, 2, 3, 5];

      class HelloWorld extends React.Component {
        render() {
          return (
            //   for循环没有产生结果,所以不是表达式:
            // <ul>
            //   for(var i = 0 ; i < 10; i ++){
            //     <li>{i}</li>
            //   }
            // </ul>
            <div>
              <p>dsfds</p>
              <ul>
                {Array(10)
                  .fill(null)
                  .map((item, index) => (
                    <li key={index}>{index}</li>
                  ))}
              </ul>
            </div>
          );
        }
      }

      class Message extends React.Component {
        render() {
          return (
            <div>
              {/* 三元表达式可以正常渲染 */}
              <h1>{msg ? "测试" : ""}</h1>
              {/* <p>{ var a = 10  }</p> 没有返回值,无法正常渲染 */}
              {/* 直接使用 */}
              <p>{10}</p>

              {/* <p>{ new Date() }</p> 不能直接渲染对象 */}
              {/* <p>{ () => 2 }</p> 不能直接渲染函数*/}
              {/* 通过转换成时间戳, 数字类型可以正常渲染 */}
              <p>{new Date().getTime()}</p>
              {/* 可以使用自定义的组件 */}
              <HelloWorld />
              {/* if(true){
                          <div>今天好心情!</div>
                      }else{
                          <div>今天很生气!</div>
                      }  if逻辑判断语句,没有返回内容,则不会正确渲染: */}
              {/*数字数组可以直接渲染: , 对象数组不能渲染*/}
              <p>{arr}</p>
            </div>
          );
        }
      }

      //   可以使用一个容器包起来进行渲染
      ReactDOM.render(
        <div>
          <Message />
          <HelloWorld />
        </div>,
        document.getElementById("root")
      );

    //   ReactDOM.render(<HelloWorld />, document.getElementById("app"));

      let renderArr = [<Message />, <HelloWorld />];
      // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
      ReactDOM.render(
        renderArr.map((item, index) => {
          return <React.Fragment key={index}> {item} </React.Fragment>;
        }),
        document.getElementById("app")
      );
    </script>
  </body>
</html>
